<template>
  <div class="banner">
    <el-carousel arrow="always" :autoplay="false">
      <el-carousel-item v-for="item in bannerList" :key="item.name">
        <div class="bannerBg" :style="{ backgroundImage: `url(${item.pic})` }">
          <h1 class="title">{{ item.name }}</h1>
          <p class="desc">{{ item.subTitle }}</p>
          <div class="btnBox">
            <!-- <p v-for="button in item.ButtonList" :key="button.ProductId">{{ convertBtnTypeText(button.Type) }} ></p> -->
            <p @click="buy(item.button1, item)">
              {{ convertBtnTypeText(item.button1) }}
            </p>
            <p @click="buy(item.button2, item)">
              {{ convertBtnTypeText(item.button2) }}
            </p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { getBanner } from "@/api/common";
import { useRouter } from "vue-router";
const router = useRouter();
const bannerList = ref();
const convertBtnTypeText = (type: string) => {
  switch (type) {
    case "1":
      return "Buy Now >";
    case "2":
      return "Learn More >";
    case "3":
      return "Buy male toys >";
    case "4":
      return "Buy female toys >";
    default:
  }
};
const buy = (type: string, item: any) => {
  // console.log(type, item)
  if (type === "1") {
    window.open("http://b站.com/?productId=" + item.product);
  } else if (type === "2") {
    window.open(item.url);
  } else if (type === "3") {
    if (item.only_one_male) {
      router.push({ path: "/productDetail", query: { id: item.product } });
    } else {
      router.push({ path: "/product", query: { type: item.type } });
    }
  } else if (type === "4") {
    if (item.only_one_female) {
      router.push({ path: "/productDetail", query: { id: item.product } });
    } else {
      router.push({ path: "/product", query: { type: item.type } });
    }
  }
};
const _getBanner = async () => {
  try {
    const res = await getBanner();
    bannerList.value = res.data.bannerList || [];
  } catch {
    bannerList.value = [];
  }
};

/**需要ssr渲染的信息，用顶层 await，改为异步组建 */
await _getBanner();
</script>
<style lang="scss" scoped>
.banner {
  :deep(.el-carousel) {
    .el-carousel__container {
      height: 736px;
    }

    .el-carousel__button {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
  }

  .bannerBg {
    background-size: 100% 100%;
    height: 100%;
    padding-left: 210px;
    padding-top: 260px;

    .title {
      width: 100%;
      font-size: 48px;
      font-weight: 700;
      color: #f5f5f7;
    }

    .desc {
      margin-top: 11px;
      font-size: 28px;
      font-weight: 400;
      line-height: 34px;
      width: 600px;
      color: #f5f5f7;
    }

    .btnBox {
      margin-top: 30px;
      display: flex;

      p {
        margin-right: 90px;
        font-size: 20px;
        font-weight: 400;
        line-height: 30px;
        color: #c9bcf0;
        cursor: pointer;
      }
    }
  }

  .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
    text-align: center;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
}
@media screen and (max-width: 750px) {
  .banner {
    :deep(.el-carousel) {
      .el-carousel__container {
        height: 12rem;
      }
    }
    .bannerBg {
      padding: 1.16rem 0.5rem;
      background-size: cover;
      background-position: right;
      .title {
        font-size: 0.48rem;
        text-align: center;
      }
      .desc {
        font-size: 0.32rem;
        width: 100%;
        margin-top: 0.1rem;
        text-align: center;
      }
      .btnBox {
        margin-top: 0.4rem;
        justify-content: space-evenly;
        p {
          width: 2.2rem;
          height: 0.64rem;
          font-size: 0.2rem;
          background: #846fc1;
          text-align: center;
          border-radius: 0.32rem;
          line-height: 0.64rem;
          margin: 0;
          border: 1px solid #846fc1;
        }
        p:nth-child(2) {
          background: none;
          color: #846fc1;
        }
      }
    }
  }
}
</style>
